<template>
    <div class="mt-20 main pr-20" id="live-main">
        <div v-if="!loading">
            <div v-if="!empty">
                <el-row :gutter="14">
                    <!-- 第一个直播间 -->
                    <el-col :span="data.length<=1?24:14">
                        <div class="first-live live-contanainer position-relative" v-if="data[0]">
                            <video @click="toDetail(data[0])" id="player" playsinline preload="auto" style="height:100%;width: 100%;z-index: 100;" v-show="!first_end" webkit-playsinline></video>
                            <div class="height-100b text-center flex align-center color-fff font-30" style="z-index: 100;" v-show="first_end">直播已结束</div>
                            <el-image :src="data[0].thumbnail" :style="(data[0].status==1 && data[0].price==0) ? 'filter: blur(30px);width: calc(100% - 60px);height: calc(100% - 60px);margin-top: 30px;' : '' " class="radius-10 height-100b width-100b" fit="cover" style="position: absolute;"></el-image>
                            <div class="author-info-first color-fff">
                                <div>{{data[0].author.name}}的直播间</div>
                                <div class="mt-10 flex align-center">
                                    <div class="flex align-center cursor-pointer">
                                        <el-avatar :size="24" :src="data[0].author.avatar"></el-avatar>
                                        <span class="pl-4">{{data[0].author.name}}</span>
                                    </div>
                                    <div class="ml-20 flex align-center">
                                        <i class="el-icon el-icon-user font-14"></i>
                                        <span>{{data[0].online_user}}</span>
                                    </div>
                                </div>
                            </div>
                            <div style="position: absolute;top:calc(50% - 25px);left:calc(50% - 25px);" v-if="data[0].status==1 && data[0].price!=0">
                                <el-image :src="require('@/assets/gif/live_big.gif')" fit="cover" style="width: 50px; height: 50px;"></el-image>
                            </div>
                            <div class="pd-4 pl-12 pr-12 radius-18 flex align-center" style="position: absolute;top:20px;left:20px;background:rgb(6 3 22 / 60%)" v-if="data[0].price>0">
                                <div class="color-fff">付费直播间</div>
                                <div class="color-yellow-light ml-3">{{data[0].price}}{{$store.state.config.coin_name}}</div>
                            </div>
                            <div class="pd-4 pl-12 pr-12 flexSB" style="position: absolute;bottom:13px;left:150px;" v-if="data[0].status == 1 && !first_end">
                                <div class="color-yellow-light size24" style="margin-right: 5px;">直播中</div>
                                <img alt src="@/assets/gif/live_big.gif" srcset style="width: 40px;" />
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="data.length<=1?0:10" style="height:550px">
                        <!-- 第二个直播间 -->
                        <div :class="data.length==2 ? 'height-100b' : 'height-49b' " @click="toDetail(data[1])" class="bg-action width-100b radius-15 position-relative" v-if="data[1]">
                            <el-image :src="data[1].thumbnail" class="radius-10" fit="cover" style="width: 100%; height: 100%;"></el-image>
                            <div class="flex align-center jus-between pl-10 pr-10 author-info color-fff" style="width: calc(100% - 30px);">
                                <div>{{data[1].author.name}}的直播间</div>
                                <div class="ml-20 flex align-center">
                                    <i class="el-icon el-icon-user font-14"></i>
                                    <span>{{data[1].online_user}}</span>
                                </div>
                            </div>
                            <div class="flexSB" style="position: absolute;top:calc(50% - 20px);left:calc(50% - 20px);" v-if="data[1].status==1">
                                <div class="color-yellow-light size20" style="margin-right: 5px;">直播中</div>
                                <el-image :src="require('@/assets/gif/live_big.gif')" fit="cover" style="width: 40px; height: 40px;"></el-image>
                            </div>
                            <div class="pd-4 pl-12 pr-12 radius-18 flex align-center" style="position: absolute;top:20px;left:20px;background:rgb(6 3 22 / 60%)" v-if="data[1].price>0">
                                <div class="color-fff">付费直播间</div>
                                <div class="color-yellow-light ml-3">{{data[1].price}}{{$store.state.config.coin_name}}</div>
                            </div>
                        </div>
                        <div class="flex" style="height:49%;margin-top:2%;" v-if="data.length>2">
                            <!-- 第三个直播间 -->
                            <div :class="data.length==3 ? 'width-100b' : 'width-49b'" @click="toDetail(data[2])" class="width-49b bg-action radius-15 position-relative">
                                <el-image :src="data[2].thumbnail" class="radius-10" fit="cover" style="width: 100%; height: 100%;"></el-image>
                                <div class="flex align-center jus-between pl-10 pr-10 author-info color-fff" style="width: calc(100% - 30px);">
                                    <div>{{data[2].author.name}}的直播间</div>
                                    <div class="ml-20 flex align-center">
                                        <i class="el-icon el-icon-user font-14"></i>
                                        <span>{{data[2].online_user}}</span>
                                    </div>
                                </div>
                                <div class="flexSB" style="position: absolute;top:calc(50% - 20px);left:calc(50% - 20px);" v-if="data[2].status==1">
                                    <div class="color-yellow-light size20" style="margin-right: 5px;">直播中</div>
                                    <el-image :src="require('@/assets/gif/live_big.gif')" fit="cover" style="width: 40px; height: 40px;"></el-image>
                                </div>
                                <div class="pd-4 pl-12 pr-12 radius-18 flex align-center" style="position: absolute;top:20px;left:20px;background:rgb(6 3 22 / 60%)" v-if="data[2].price>0">
                                    <div class="color-fff">付费直播间</div>
                                    <div class="color-yellow-light ml-3">{{data[2].price}}{{$store.state.config.coin_name}}</div>
                                </div>
                            </div>
                            <!-- 第四个直播间 -->
                            <div @click="toDetail(data[3])" class="bg-action width-49b live-item radius-15 position-relative" style="margin-left:2%" v-if="data.length>3">
                                <el-image :src="data[3].thumbnail" class="radius-10" fit="cover" style="width: 100%; height: 100%;"></el-image>
                                <div class="flex align-center jus-between pl-10 pr-10 author-info color-fff" style="width: calc(100% - 30px);">
                                    <div>{{data[3].author.name}}的直播间</div>
                                    <div class="ml-20 flex align-center">
                                        <i class="el-icon el-icon-user font-14"></i>
                                        <span>{{data[3].online_user}}</span>
                                    </div>
                                </div>
                                <div class="flexSB" style="position: absolute;top:calc(50% - 20px);left:calc(50% - 20px);" v-if="data[3].status==1">
                                    <div class="color-yellow-light size20" style="margin-right: 5px;">直播中</div>
                                    <el-image :src="require('@/assets/gif/live_big.gif')" fit="cover" style="width: 40px; height: 40px;"></el-image>
                                </div>
                                <div class="pd-4 pl-12 pr-12 radius-18 flex align-center" style="position: absolute;top:20px;left:20px;background:rgb(6 3 22 / 60%)" v-if="data[3].price>0">
                                    <div class="color-fff">付费直播间</div>
                                    <div class="color-yellow-light ml-3">{{data[3].price}}{{$store.state.config.coin_name}}</div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <div class="color-fff font-16 mt-20 pb-20">推荐直播</div>

                <div v-if="data.length>4">
                    <el-row :gutter="16">
                        <el-col :class="{'mt-13':index>9}" :key="index" :span="4" v-for="(item,index) in data" v-if="index>3">
                            <div @click="toDetail(item)" class="position-relative">
                                <div class="position-relative">
                                    <el-image :src="item.thumbnail" fit="cover" style="width: 100%; height: 8vw;border-top-left-radius:10px;border-top-right-radius:10px"></el-image>
                                    <div class="color-fff font-13" style="position:absolute;bottom:10px;left:10px;">
                                        <i class="el-icon el-icon-user font-14"></i>
                                        <span>{{item.online_user}}</span>
                                    </div>
                                    <div style="position: absolute;top:calc(50% - 15px);left:calc(50% - 15px);" v-if="item.status==1">
                                        <el-image :src="require('@/assets/gif/live_small.gif')" fit="cover" style="width: 30px; height: 30px;"></el-image>
                                    </div>
                                </div>
                                <div class="pd-10 bg-action color-fff" style="margin-top:-5px;;border-bottom-left-radius:10px;border-bottom-right-radius:10px">
                                    <div class="font-15">{{item.author.name}}的直播间</div>
                                    <div class="mt-6 flex align-center cursor-pointer">
                                        <el-avatar :size="20" :src="item.author.avatar"></el-avatar>
                                        <span class="pl-6 font-13">{{item.author.name}}</span>
                                    </div>
                                </div>
                                <div class="pd-4 pl-12 pr-12 radius-18 flex align-center font-13" style="position: absolute;top:8px;left:14px;background:rgb(6 3 22 / 60%)" v-if="item.price>0">
                                    <div class="color-fff">付费直播间</div>
                                    <div class="color-yellow-light ml-3">{{item.price}}{{$store.state.config.coin_name}}</div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="flex jus-center flex-dre-column align-center" style="margin-top:30px" v-else>
                    <el-image :src="require('@/assets/image/empty.png')" fit="cover" style="width: 10vw; height: 10vw;"></el-image>
                    <div class="color-999">暂无更多直播</div>
                </div>
                <div class="flex jus-center align-center height-30 mt-10">
                    <el-image :src="require('@/assets/gif/global_loading.gif')" fit="cover" style="width: 40px; height: 30px;" v-show="page_loading"></el-image>
                </div>
            </div>
            <div class="flex jus-center flex-dre-column align-center" style="margin-top:20vh" v-else>
                <el-image :src="require('@/assets/image/empty.png')" fit="cover" style="width: 10vw; height: 10vw;"></el-image>
                <div class="color-999">暂无直播</div>
            </div>
        </div>
        <div class="flex jus-center flex-dre-column align-center" style="margin-top:30vh" v-else>
            <el-image :src="require('@/assets/gif/re-video-loading.gif')" fit="cover" style="width: 120px; height: 60px;"></el-image>
        </div>
        <live-detail :choose_live="choose_live" ref="detail"></live-detail>
    </div>
</template>

<script>
import TCPlayer from 'tcplayer.js'
import 'tcplayer.js/dist/tcplayer.min.css'
import liveDetail from '@/components/live/detail'

export default {
    components: {
        liveDetail,
    },
    data() {
        return {
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            data: [],
            query: {
                offset: 0,
                limit: 23,
            },
            player: null,
            empty: true,
            loading: true,
            page_loading: false,
            first_end: false,
            choose_live: null,
        }
    },
    mounted() {
        this.getList(true)
        let box = document.getElementById('live-main')
        box.addEventListener('scroll', this.scrollInfo)
    },
    methods: {
        loadLive(data) {
            if (data.status == 1 && data.price == 0) {
                let param = {
                    room_id: data.room_id,
                    action: 'pull',
                    type: 'webtrc',
                }
                this.$request.get('/live/stream_url', param).then((res) => {
                    this.player = TCPlayer('player', {
                        sources: [
                            {
                                src: res.url,
                            },
                        ],
                        muted: true,
                        licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1320915382_1/v_cube.license',
                        playbackRates: [],
                        autoplay: true,
                        controls: false,
                    })
                    let that = this
                    this.player.on('webrtcevent', function (event) {
                        console.log(event.data.code)
                        if (event.data.code == 1005) {
                            that.player.dispose()
                            that.player = null
                            that.first_end = true
                        }
                    })

                    this.player.on('error', function (error) {
                        console.log(error, 2342342)
                        that.player.dispose()
                        that.player = null
                        that.first_end = true
                    })
                })
            }
        },
        toDetail(detail) {
            console.log(detail)
            if (detail.status != 1) {
                this.$message({
                    message: '直播已结束',
                    type: 'warning',
                    customClass: 'messageClass',
                })
                return
            }
            this.choose_live = detail
            this.$nextTick(() => {
                if (this.$refs.detail.player) {
                    this.$refs.detail.player.dispose()
                    this.$refs.detail.player = null
                }
                this.$nextTick(() => {
                    this.$refs.detail.init()
                    this.$refs.detail.visible = true
                })
            })
            // this.$refs.detail.visible = true
        },
        getList(init = false) {
            if (!init) {
                this.page_loading = true
            }
            this.$request.get('/live/pc_index', this.query).then((res) => {
                this.data = this.data.concat(res.result)
                if (init && this.data.length > 0) {
                    this.loadLive(this.data[0])
                }
                if (this.data.length > 0) {
                    this.empty = false
                } else {
                    this.empty = true
                }
                this.loading = false
                this.page_loading = false
            })
        },

        scrollInfo() {
            let e = document.getElementById('live-main')
            if (e.scrollTop + e.clientHeight >= e.scrollHeight - 50) {
                this.scroll()
            }
        },
        scroll() {
            if (this.page_loading == true) {
                return false
            }
            this.query.offset = this.data.length
            this.getList()
        },
    },
}
</script>

<style lang="scss" scoped>
.main {
    max-height: calc(100vh - 4rem - 4px);
    overflow-y: scroll;
}
.main::-webkit-scrollbar {
    display: none;
}
.first-live {
    background: #151225;
    border-radius: 15px;
}
.live-contanainer {
    height: 550px;
    display: flex;
    justify-content: center;
}
.live-contanainer video {
    background: transparent;
}
/deep/.video-js {
    background: none;
}
.el-col-12,
.live-item {
    height: 100%;
}
.author-info-first {
    position: absolute;
    bottom: 15px;
    left: 15px;
}
.author-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
}
</style>